<template>
  <div class="modifyUsername">
    <van-nav-bar
      left-text="取消"
      right-text="完成"
      left-arrow
      @click-left="$emit('close')"
      @click-right="submit"
    />
    <div class="testarea">
      <van-field
      v-model.trim="name"
      rows="2"
      autosize
      type="textarea"
      maxlength="7"
      placeholder="请输入用户名"
      show-word-limit
    />
    </div>
  </div>
</template>

<script>
import {editUserInfoAPI} from '@/api'
export default {
name: 'ModifyUsername',
props:{
  value:{
    type: String,
    required: true
  }
},
  data(){
    return {
      name: this.value
    }
  },
  methods: {
    submit(){     
      this.editUserInfo()
    },
    async editUserInfo(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '保存中...',
      })
      try {
        await editUserInfoAPI({
          name: this.name
        })
        this.$emit('input',this.name)
        this.$emit('close')
        this.$toast.success('保存成功')
      } catch (error) {
        this.$toast.fail('操作失败，请稍后重试！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.modifyUsername{
  /* /deep/ .van-nav-bar__content{
    .van-nav-bar__text{
      color: #fff;
    }
  } */
  
}
.testarea{
  padding: 20px;
}
</style>